<!--
 * @Author: wangzhichiao<https://github.com/wzc570738205>
 * @Date: 2021-07-02 13:59:58
 * @LastEditors: wangzhichiao<https://github.com/wzc570738205>
 * @LastEditTime: 2021-07-02 15:27:42
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.min.js"></script>
    <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/211120/orbitControls.js"></script>
  </head>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    body {
      width: 100vw;
      height: 100vh;
      overflow: hidden;
    }
    canvas {
      cursor: move;
    }
  </style>
  <body></body>
</html>
<script>
  var width = window.innerWidth;
  var height = window.innerHeight;
  const textureLoader = new THREE.TextureLoader();

  //scene
  var scene = new THREE.Scene();
  //camera
  var camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 10000);
  camera.position.y = 0;
  camera.position.z = 500;
  scene.add(camera);
  //imgTexture
  var imgTexture = textureLoader.load("./park.jpg");
  imgTexture.minFilter = THREE.LinearFilter;
  imgTexture.magFilter = THREE.LinearFilter;
  imgTexture.format = THREE.RGBFormat;
  
  var cubeGeometry = new THREE.SphereGeometry(500, 60, 40);
  var sphereMat = new THREE.MeshBasicMaterial({ map: imgTexture });
  sphereMat.side = THREE.BackSide;
  var cube = new THREE.Mesh(cubeGeometry, sphereMat);
  scene.add(cube);
  //renderer
  var renderer = new THREE.WebGLRenderer();
  renderer.setSize(width, height);
  document.body.appendChild(renderer.domElement);
  //controls
  var controls = new THREE.OrbitControls(camera);
  controls.enableDamping = true;
  controls.dampingFactor = 0.25;
  controls.enableZoom = false;
  controls.maxDistance = 500;
  controls.minDistance = 500;

  function render() {
    requestAnimationFrame(render);
    cube.rotation.y += 0.001;
    renderer.render(scene, camera);
  }

  render();
</script>
